<template>
	<view class="bar" @click="itemsHandle(item)">
		<image class='icon' :src="index==1?item.selectedIcon:item.icon"></image>
		<view class="number" v-if="item == 'cart'"></view>
		<view class="test" :class="{'active': index==1}">{{item.name}}</view>
	</view>
</template>

<script>
	import { mapMutations } from 'vuex'
	export default {
		data() {
			return {
				index: 0
			}
		},
		props:{
			item: {}
		},
		watch: {
			item: {
				handler: function (val) {
					this.item = val
					this.index = val.active
				},
				deep: true
			}
		},
		
		methods: {
			itemsHandle (item) {
				console.log('点击了', item)
				this.$emit('tabBarHandle', item)
			}
		}
	}
</script>

<style lang="less">
	.bar{
		display: flex;
		flex-direction: column;
		align-items: center;
		.icon{
			width: 54rpx;
			height: 54rpx;
		}
		.active {
			color: #7ec5cf;
		}
		.test{
			font-size: 20rpx;
		}
		.number{
			width: 20rpx;
			border-radius: 50%;
		}
	}
</style>
